<template>
  <div class="sider-bar">
    <el-menu
      active-text-color="#3b6699"
      background-color="#fff"
      class="el-menu-vertical-demo"
      default-active="1"
      text-color="black"
      :unique-opened="true"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="item in menuItems" :key="item.path">
        <el-menu-item
          v-if="!item.children || item.children.length === 0"
          :index="item.path"
          @click="clickMenu(item)"
        >
          <!-- <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon> -->
          <img :src="item.meta.icon" alt="" class="icon">
          <span>{{ item.meta.title }}</span>
        </el-menu-item>

        <el-sub-menu v-else :index="item.path">
          <template #title>
            <!-- <el-icon>
              <component :is="item.meta.icon"></component>
            </el-icon> -->

            <img :src="item.meta.icon" alt="" class="icon">
            <span>{{ item.meta.title }}</span>
          </template>

          <el-menu-item
            v-for="subItem in item.children"
            :key="subItem.path"
            :index="subItem.path"
            @click="clickMenu(subItem)"
          >
            <span>{{ subItem.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

import { menuMap } from "@/data/menuItem.ts";

const router = useRouter();

// 变量
const state = reactive({
  menuItems: [],
});

const { menuItems } = { ...toRefs(state) };

for (const item in menuMap) {
  menuItems.value.push(menuMap[item]);
}

// 事件
const clickMenu = (item) => {
  router.push({ name: item.name });
};

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};

const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
.sider-bar {
  width: 200px;
  height: calc(100vh - 80px);

  min-width: 200px;
  border-right: 1px solid #ccc;
  box-sizing: border-box;

  .icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 8px;
    padding-left: 6px;
  }
}
</style>
